<template>
  <div class='w'>
    <div class='banner'>
      <img src='@/assets/images/home_banner.png' alt='' style=''>
    </div>
    <div class='main'>
      <el-row :gutter="20">
        <el-col :span='8'>
          <el-button type='primary' class='click_area' @click='getProjectKey'>新建问卷</el-button>
        </el-col>
        <el-col :span='8'>
          <el-button type='success' class='click_area'>问卷模板</el-button>
        </el-col>
        <el-col :span='8'>
          <el-button type='warning' class='click_area' @click="gotoPath('myProject')">问卷中心</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { formConf } from '@/components/gene/config'
export default {
  name: 'Start',
  data() {
    return {
      projectKey: ''
    }

  },
  methods: {
    async getProjectKey() {
      const { data: res } = await this.$http.post('/project/create',{ projectName: formConf.title,projectDescribe: formConf.description })
      console.log('res',res.data)
      this.projectKey = res.data
      this.gotoPath('edit')
    },
    gotoPath(path) {
      this.$router.push({ path: path , query: { projectKey: this.projectKey } })
    }
  }
}
</script>

<style lang="less" scoped>
@import "src/assets/css/themeColor";
.w{
  margin: auto;
  width: calc(100% - 300px);
  background-color: @theme_white;
  height: 100%;
  overflow: hidden;
}
.banner{
  position: relative;
  overflow: hidden;
  text-align: center;
  //width: 1270px;
  height: 500px;
  img{
    display: inline-block;
  }
}
.main{
  position: relative;
  height: 200px;
  text-align: center;
  top: 5%;
}
.el-row{

}
.el-button{
  font-size: 18px;
  width: 200px ;
  height: 80px;
}
</style>
